<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>显示层级</title>
        <style>
          #d1{
            width: 50px;
            height: 100px;
            background-color: red;
            /*1添加绝对定位
            此时div2与1重叠div2在下面*/
            position:absolute;
            /*03通过z-index元素来
            控制重叠层级，值越大显示就在上面*/
            z-index: 1;
          }
          #d2{
            width: 100px;
            height: 50px;
            background-color: blue;
            /*2 添加绝对定位
            此时div2与1重叠div2在上面*/
            position: absolute;
            /*03通过z-index元素来
          控制重叠层级，值越大显示就在上面*/
            z-index: 0;
          }
        </style>
    </head>
    <body>
        <div id="d1">div1</div>
        <div id="d2">div2</div>
    </body>
</html>